<template>
	<!--设置收费页面-->
<view class="community">
	<view class="head_bg">
		<view class="ele_title_left padding-left-sm padding-bottom-xs">
			<view class="ele_title_inner padding-xs padding-left-sm" style="color: white;">{{name}}</view>
			<view class="ele_address">
				<image class="ele_address_img" src="../../../common/img/dizhi_hui.png" mode=""></image>
				<text class="text-white">{{add}}</text>
			</view>
		</view>
	</view>
	<view class="operating_box" style="margin-top:-50rpx;margin-bottom:20rpx;">
		<view class="operating_header" style="border-bottom:2rpx dotted grey;">
			<view class="padding-sm padding-sm">
				<text class="text-df text-black text-bold">方式一：按时收费</text>
			</view>
			<view class="operating_header_right">
				<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
		</view>
		<view class="padding-sm" v-if="switchA">
			<view class="cu-bar" >
				<input class="uni-input-input" placeholder="0" @input="ansh1" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>元-充电</text></view>
				<input class="uni-input-input" placeholder="0" @input="anshi2" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>小时</text></view>
				<view class="action margin-top-xs text-left">
					<!-- <image src="../../../common/img/tianjia.png" style="width:80rpx;height:80rpx"></image> -->
					<view class="cu-avatar round bg-blue text-xl" @tap="listQ1J" >+</view>
				</view>
			</view>
			<view v-for="(info,index) in listQ1" :key="index">
				 <view class="cu-bar" v-if="!info.ch">
				 	<input class="uni-input-input" @input="anshi3($event,index)" placeholder="0" name="input"></input>
				 	<view class="action margin-left-sm margin-right-sm"><text>元-充电</text></view>
				 	<input class="uni-input-input" @input="anshi4($event,index)" placeholder="0" name="input"></input>
				 	<view class="action margin-left-sm margin-right-sm"><text>小时</text></view>
				 	<view class="action margin-left" @tap="remove(index,info)">
				 		<!-- <image src="../../../common/img/tianjia.png" style="width:80rpx;height:80rpx"></image> -->
				 		<view class="cu-avatar round bg-red text-xl">--</view>
				 	</view>
				 </view>
				
			</view>
			
		</view>
	</view>
	<view class="operating_box" style="margin-bottom:20rpx;">
		<view class="operating_header" style="border-bottom:2rpx dotted grey;">
			<view class="padding-sm padding-sm">
				<text class="text-df text-black text-bold">方式二：按量收费</text>
			</view>
			<view class="operating_header_right">
				<switch @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
			</view>
		</view>
		<view class="padding-sm" v-if="switchB">
			<view class="cu-bar">
				<input class="uni-input-input" @input="anshi5" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>-</text></view>
				<input class="uni-input-input" @input="anshi6" placeholder="0" name="input" ></input>
				<view class="action margin-left-sm margin-right-sm"><text>瓦</text></view>
				<input class="uni-input-input" @input="anshi7" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>元/小时</text></view>
				<view class="action margin-top-xs text-left" @tap="listQ1J2">
					<!-- <image src="../../../common/img/tianjia.png" style="width:80rpx;height:80rpx"></image> -->
					<view class="cu-avatar round bg-blue text-xl">+</view>
				</view>
			</view>
		
		
		<view v-for="(info,index) in listQ2" :key="index">
				
			<view class="cu-bar" v-if="!info.ch">
				<input class="uni-input-input" @input="anshi8($event,index)" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>-</text></view>
				<input class="uni-input-input" @input="anshi9($event,index)" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>瓦</text></view>
				<input class="uni-input-input" @input="anshi10($event,index)" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>元/小时</text></view>
				<view class="action text-left" @tap="remove2(index,info)">
					<!-- <image src="../../../common/img/tianjia.png" style="width:80rpx;height:80rpx"></image> -->
					<view class="cu-avatar round bg-red text-xl">--</view>
				</view>
			</view>
			</view>
			
		
		</view>
	</view>
	<view class="operating_box" style="margin-bottom:20rpx;">
		<view class="operating_header" style="border-bottom:2rpx dotted grey;">
			<view class="padding-sm padding-sm">
				<text class="text-df text-black text-bold">方式三：按电量收费收费(电量度数)</text>
			</view>
			<view class="operating_header_right">
				<switch @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
			</view>
		</view>
		<view class="padding-sm" v-if="switchC">
			<view class="flex text-left">
				<view class="basis-xl">
					<view class="flex">
						<view class="flex-sub text-df padding-left-xs">电费价格:</view>
						<view class="flex-sub">
							<input class="uni-input-input" @input="setE" placeholder="0" name="input"></input>
						</view>
						<view class="flex-twice">元/度</view>
					</view>
				</view>
			</view>
			<view class="padding-top-sm padding-left-xs text-black">服务费设置：</view>
			<view class="cu-bar">
				<input class="uni-input-input" @input="anshi11" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>-</text></view>
				<input class="uni-input-input" @input="anshi12" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>时</text></view>
				<input class="uni-input-input" @input="anshi13" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>元/小时</text></view>
				<view class="action margin-top-xs text-left" @tap="listQ1J3">
					<!-- <image src="../../../common/img/tianjia.png" style="width:80rpx;height:80rpx"></image> -->
					<view class="cu-avatar round bg-blue text-xl">+</view>
				</view>
			</view>
			
			<view v-for="(info,index) in listQ3" :key="index" >
			<view class="cu-bar" v-if="!info.ch">
				<input class="uni-input-input"  @input="anshi14($event,index)"  placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>-</text></view>
				<input class="uni-input-input"  @input="anshi15($event,index)" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>时</text></view>
				<input class="uni-input-input"  @input="anshi16($event,index)" placeholder="0" name="input"></input>
				<view class="action margin-left-sm margin-right-sm"><text>元/小时</text></view>
				<view class="action text-left" @tap="remove3(index,info)">
					<!-- <image src="../../../common/img/tianjia.png" style="width:80rpx;height:80rpx"></image> -->
					<view class="cu-avatar round bg-red text-xl">--</view>
				</view>
			</view>
			</view>
			
		</view>
	</view>
	<view class="operating_box" style="margin-bottom:20rpx;">
		<view class="operating_header" style="border-bottom:2rpx dotted grey;">
			<view class="padding-sm padding-sm">
				<text class="text-df text-black text-bold">方式四：刷卡收费</text>
			</view>
		</view>
		<view class="operating_header" style="border-bottom:2rpx dotted grey;">
			<view class="padding-sm padding-sm">
				<text class="text-df text-black text-bold">按时收费</text>
			</view>
			<view class="operating_header_right">
				<switch @change="SwitchD" :class="switchD?'checked':''" :checked="switchD?true:false"></switch>
			</view>
		</view>
		<view class="cu-bar" style="border-bottom:2rpx dotted grey;">
			<view class="action margin-left-sm margin-right-sm"><text>按时</text></view>
			<input class="uni-input-input" @input="anshi17"  placeholder="0" name="input"></input>
			<view class="action margin-left-sm margin-right-sm"><text>元-充电</text></view>
			<input class="uni-input-input" @input="anshi18" placeholder="0" name="input"></input>
			<view class="action margin-left-sm margin-right-sm"><text>小时</text></view>
			<view class="flex-sub text-left">
			</view>
		</view>
		<view class="operating_header" style="border-bottom:2rpx dotted grey;">
			<view class="padding-sm padding-sm">
				<text class="text-df text-black text-bold">按量收费</text>
			</view>
			<view class="operating_header_right">
				<switch @change="SwitchE" :class="switchE?'checked':''" :checked="switchE?true:false"></switch>
			</view>
		</view>
		<view class="padding-top-sm padding-left-sm text-black">刷卡按量收费套餐同移动支付一致</view>
	</view>
	
	<view>
		<button type="button" class="add_text_btn" @tap="saveAll" >保存</button>
	</view>
	
</view>
    
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				guid:'',
				name:'',
				add:'',
				switchA:true,
				switchB:true,
				switchC:true,
				switchD:true,
				switchE:true,
				listQ1:[],
				listQ2:[],
				listQ3:[],
				residential_quarters_guid:'',//	字符串	小区标识	是
				open_amount:0,//	整型	按量收费是否开启  0 关闭 1开启	否
				open_electricity:0,//	整型	按电费收费是否开启  0 关闭 1开启	否
				open_ontime:0,//	整型	按时收费是否开启 0 关闭 1开启	否
				electricity_fees:0.00,//	浮点型	电费价格	否
				charge_by_card:0,//	整型	刷卡收费方式 0 按时 1按量收费	否
				by_card_hour:0,//	整型	刷卡按时收费小时	否
				by_card_fees:0.00,//	浮点型	刷卡按时收费金额 0 无 1 按时 2按量收费	否
				ontime_free	:[],// json	按时收费	否
				electricity_free:[],//	json	按电费收费服务费	否
				amount_free:[],//	json	按量收费	否
				ontime_hour:0,//	整型	小时	否
				ontime_money:0.00,//	浮点型	金额	否
				begin_hour:0,//	整型	起始小时	否
				end_hour:0,//	整型	结束小时	否
				elecriciy_money:0.00,//	浮点型	金额	否
				begin_wattage:0,//	整型	起始瓦数	否
				end_wattage:0,//	整型	结束瓦数	否
				amount_money:0.00,//	浮点型	金额	否
				anlishi:[],
				anlishi2:[],
				anlishi3:[],
			}
		},
		onLoad(options) {
			let info=JSON.parse(options.item);
			this.guid=info.residential_quarters_guid;
			this.name = info.residential_quarters_name;
			this.add = info.residential_quarters_address;
		},
		onShow() {
		},
		methods: {
			SwitchA(e) {
				this.switchA = e.detail.value
				console.log(this.switchA)
			},
			SwitchB(e) {
				this.switchB = e.detail.value
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			SwitchD(e) {
				this.switchD = e.detail.value
			},
			SwitchE(e) {
				this.switchE = e.detail.value
			},
				
			listQ1J(){
				//this.listQ1=this.listQ1+1;
				this.listQ1.push({ch:false})
			},
			listQ1J2(){
				//this.listQ1=this.listQ1+1;
				this.listQ2.push({ch:false})
			},
			listQ1J3(){
				//this.listQ1=this.listQ1+1;
				this.listQ3.push({ch:false})
			},
			remove(i,info){
				//this.listQ1=this.listQ1-1;
				info.ch = true;
				for (let i = 0; i < this.anlishi.length; i++) {
					if (this.anlishi[i].id== i) {
						this.anlishi.splice(i, 1);
					}
				}
			},
			remove2(i,info){
				//this.listQ1=this.listQ1-1;
				info.ch = true;
				for (let i = 0; i < this.anlishi2.length; i++) {
					if (this.anlishi2[i].id== i) {
						this.anlishi2.splice(i, 1);
					}
				}
			},
			remove3(i,info){
				info.ch = true;
				for (let i = 0; i < this.anlishi3.length; i++) {
					if (this.anlishi3[i].id== i) {
						this.anlishi3.splice(i, 1);
					}
				}
			},
			ansh1(e){
				this.ontime_money=e.detail.value;
			},
			anshi2(e){
				this.ontime_hour =e.detail.value;
			},
			anshi5(e){
				this.begin_wattage =e.detail.value;
			},
			anshi6(e){
				this.end_wattage =e.detail.value;
			},
			anshi7(e){
				this.amount_money =e.detail.value;
			},
			anshi11(e){
				this.begin_hour =e.detail.value;
			},
			anshi12(e){
				this.end_hour =e.detail.value;
			},
			anshi13(e){
				this.elecriciy_money =e.detail.value;
			},
			anshi17(e){
				this.by_card_fees =e.detail.value;
			},
			anshi18(e){
				this.by_card_hour =e.detail.value;
			},
			setE(e){
				this.electricity_fees =e.detail.value;
			},
			anshi3(e,index){
				let ss =e.detail.value;
				 if(this.anlishi.length>0){
					 for (let i = 0; i < this.anlishi.length; i++) {
					 	if (this.anlishi[i].id== index) {
					 		this.anlishi[i].ontime_money=ss;
					 	}
					 }
				 }else{
					this.anlishi.push({
						ontime_money:ss,
						id:index
					}) 
				 }

			},
			anshi4(e,index){
				let ss =e.detail.value;
				 if(this.anlishi.length>0){
					 for (let i = 0; i < this.anlishi.length; i++) {
						 console.log(this.anlishi[i].id)
					 	if (this.anlishi[i].id== index) {
					 		this.anlishi[i].ontime_hour=ss;
					 	}
					 }
				 }else{
					this.anlishi.push({
						ontime_hour:ss,
						id:index
					}) 
				 }
			},
			anshi8(e,index){
				let ss =e.detail.value;
				 if(this.anlishi2.length>0){
					 for (let i = 0; i < this.anlishi2.length; i++) {
					 	if (this.anlishi2[i].id== index) {
					 		this.anlishi2[i].begin_wattage=ss;
					 	}
					 }
				 }else{
					this.anlishi2.push({
						begin_wattage:ss,
						id:index
					}) 
				 }
			
			},
			anshi9(e,index){
				let ss =e.detail.value;
				 if(this.anlishi2.length>0){
					 for (let i = 0; i < this.anlishi2.length; i++) {
					 	if (this.anlishi2[i].id== index) {
					 		this.anlishi2[i].end_wattage=ss;
					 	}
					 }
				 }else{
					this.anlishi2.push({
						end_wattage:ss,
						id:index
					}) 
				 }
			
			},
			anshi10(e,index){
				let ss =e.detail.value;
				 if(this.anlishi2.length>0){
					 for (let i = 0; i < this.anlishi2.length; i++) {
					 	if (this.anlishi2[i].id== index) {
					 		this.anlishi2[i].amount_money=ss;
					 	}
					 }
				 }else{
					this.anlishi2.push({
						amount_money:ss,
						id:index
					}) 
				 }
			
			},
			
			anshi14(e,index){
				let ss =e.detail.value;
				 if(this.anlishi3.length>0){
					 for (let i = 0; i < this.anlishi3.length; i++) {
					 	if (this.anlishi3[i].id== index) {
					 		this.anlishi3[i].begin_hour=ss;
					 	}
					 }
				 }else{
					this.anlishi3.push({
						begin_hour:ss,
						id:index
					}) 
				 }
			
			},
			anshi15(e,index){
				let ss =e.detail.value;
				 if(this.anlishi3.length>0){
					 for (let i = 0; i < this.anlishi3.length; i++) {
					 	if (this.anlishi3[i].id== index) {
					 		this.anlishi3[i].end_hour=ss;
					 	}
					 }
				 }else{
					this.anlishi3.push({
						end_hour:ss,
						id:index
					}) 
				 }
			
			},
			anshi16(e,index){
				let ss =e.detail.value;
				 if(this.anlishi3.length>0){
					 for (let i = 0; i < this.anlishi3.length; i++) {
					 	if (this.anlishi3[i].id== index) {
					 		this.anlishi3[i].elecriciy_money=ss;
					 	}
					 }
				 }else{
					this.anlishi3.push({
						elecriciy_money:ss,
						id:index
					}) 
				 }
			
			},
			saveAll(){
				
				this.open_ontime = this.switchA?1:0;
				this.open_amount = this.switchB?1:0;
				this.open_electricity= this.switchC?1:0;
				this.charge_by_card = this.switchD?1:0;
				this.ontime_free.push({
					"ontime_hour":this.ontime_hour,
					"ontime_money":this.ontime_money
				})
				if(this.anlishi.length>0){
					for (let i = 0; i < this.anlishi.length; i++) {
						 this.ontime_free.push({
							 "ontime_hour":this.anlishi[i].ontime_hour,
							 "ontime_money":this.anlishi[i].ontime_money
							 })
						}
				}
				
				this.amount_free.push({
				     "begin_wattage":this.begin_wattage,
				     "end_wattage": this.end_wattage,
				     "amount_money":this.amount_money
				})
				if(this.anlishi2.length>0){
					for (let i = 0; i < this.anlishi2.length; i++) {
						 this.amount_free.push({
							 "begin_wattage":this.anlishi2[i].begin_wattage,
							 "end_wattage":this.anlishi2[i].end_wattage,
							 "amount_money":this.anlishi2[i].amount_money
							 })
						}
				}
				
				this.electricity_free.push({
					"begin_hour":this.begin_hour,
					"end_hour":this.end_hour,
					"elecriciy_money":this.elecriciy_money
				})
				if(this.anlishi3.length>0){
					for (let i = 0; i < this.anlishi3.length; i++) {
						 this.electricity_free.push({
							 "begin_hour":this.anlishi3[i].begin_hour,
							 "end_hour":this.anlishi3[i].end_hour,
							 "elecriciy_money":this.anlishi3[i].elecriciy_money
							 })
						}
				}
				this.http.tokenreq({
					url: 'residenialquarers/v1/getcharge',
					data:{
						"residential_quarters_guid":this.guid,
                        "open_amount":this.open_amount,
						"open_electricity":this.open_electricity,
						"open_ontime":this.open_ontime,
			            "electricity_fees":this.electricity_fees,
					    "charge_by_card":this.charge_by_card,
						"by_card_hour":this.by_card_hour,
						"by_card_fees":this.by_card_fees,
						"ontime_free":this.ontime_free,
						"electricity_free":this.electricity_free,
						"amount_free":this.amount_free
						}
				}).then((res) => {
					let e=res.data;
					if(e.code==0 && e.success){
						uni.showModal({
							title: '提示',
							content: '设置成功',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'/pages/community/community/community'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
				
			}
		}
	}
</script>

<style>
	.uni-input-input{
		width:100rpx;
		border:1rpx solid gray;
		padding:10rpx 5rpx;
	}
</style>
